<template>
	<el-card shadow="hover" v-loading="isLoading">
		<!--			<el-form :model="form" ref="form" :rules="rules"  :disabled="this.action == 'view'">-->
		<h2>问诊单信息</h2>
		<el-divider/>
		<el-main>
			<el-row justify="start">
				<el-col :span="5">
					<el-form-item label="基本信息">
						<el-text class="mx-1" :text="form.patient_sn" clearable></el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="5">
					<el-form-item label="问诊单号：" prop="patient_sn">
						<el-text class="mx-1" :text="form.patient_sn" clearable>{{ form.patient_sn }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5" :offset="1">
					<el-form-item label="问诊状态：" prop="status_name">
						<el-text class="mx-1" :text="form.status_name" clearable>{{ form.status_name }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5" :offset="1">
					<el-form-item label="账号：" prop="user_mobile">
						<el-text class="mx-1" :text="form.user_mobile" clearable>{{ form.user_mobile }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5" :offset="1">
					<el-form-item label="单位名称：" prop="company_name">
						<el-text class="mx-1" :text="form.company_name" clearable>{{ form.company_name }}</el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="5">
					<el-form-item label="问诊时间：" prop="created_at">
						<el-text class="mx-1" :text="form.created_at" clearable>{{ form.created_at }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5" :offset="1">
					<el-form-item label="通话开始时间：" prop="call_begin">
						<el-text class="mx-1" :text="form.call_begin" clearable>{{ form.call_begin }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5" :offset="1">
					<el-form-item label="通话结束时间：" prop="call_end">
						<el-text class="mx-1" :text="form.call_end" clearable>{{ form.call_end }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5" :offset="1">
					<el-form-item label="问诊完成时间：" prop="over_at">
						<el-text class="mx-1" :text="form.over_at" clearable>{{ form.over_at }}</el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider/>
			<el-row>
				<el-col :span="4">
					<el-form-item label="医生信息">
						<el-text class="mx-1" :text="form.patient_sn" clearable></el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="5">
					<el-form-item label="姓名：" prop="doctor_name">
						<el-text class="mx-1" :text="form.doctor_name" clearable>{{ form.doctor_name }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5" :offset="1">
					<el-form-item label="职称：" prop="doctor_job_title">
						<el-text class="mx-1" :text="form.doctor_job_title" clearable>{{
								form.doctor_job_title
							}}
						</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5" :offset="1">
					<el-form-item label="手机号：" prop="doctor_mobile">
						<el-text class="mx-1" :text="form.doctor_mobile" clearable>{{ form.doctor_mobile }}</el-text>
					</el-form-item>
				</el-col>
			</el-row>
		</el-main>
	</el-card>
	<el-card shadow="hover">

		<el-row>
			<el-col :span="5">
				<h2>互联网医院电子病历</h2>
			</el-col>
			<el-col :span="5">
				<el-form-item label="时间：" prop="created_at">
					<el-text class="mx-1" :text="form.created_at" clearable>{{ form.created_at }}</el-text>
				</el-form-item>
			</el-col>
		</el-row>
		<el-divider/>
		<el-main>
			<el-row>
				<el-col :span="5">
					<el-form-item label="患者信息">
						<el-text class="mx-1" :text="form.patient_sn" clearable></el-text>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="5">
					<el-form-item label="姓名：" prop="patient_name">
						<el-text class="mx-1" :text="form.patient_name" clearable>{{ form.patient_name }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5" :offset="1">
					<el-form-item label="性别：" prop="patient_sex_name">
						<el-text class="mx-1" :text="form.patient_sex_name" clearable>{{
								form.patient_sex_name
							}}
						</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5" :offset="1">
					<el-form-item label="年龄：" prop="patient_age">
						<el-text class="mx-1" :text="form.patient_age" clearable>{{ form.patient_age }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="5" :offset="1">
					<el-form-item label="身份证号：" prop="patient_id_card">
						<el-text class="mx-1" :text="form.patient_id_card" clearable>{{
								form.patient_id_card
							}}
						</el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider/>
			<el-row>
				<el-col :span="5">
					<el-form-item label="病情信息">
						<el-text class="mx-1" :text="form.patient_sn" clearable></el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="5">
					<el-form-item label="主诉：" prop="principal_action">
						<el-text class="mx-1" :text="form.principal_action" clearable>{{
								form.principal_action
							}}
						</el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="5">
					<el-form-item label="现病史：" prop="medical_history">
						<el-text class="mx-1" :text="form.medical_history" clearable>{{
								form.medical_history
							}}
						</el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="5">
					<el-form-item label="既往病史：" prop="anamnesis">
						<el-text class="mx-1" :text="form.anamnesis" clearable>{{ form.anamnesis }}</el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="5">
					<el-form-item label="过敏史：" prop="allergy">
						<el-text class="mx-1" :text="form.allergy" clearable>{{ form.allergy }}</el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider/>
			<el-row>
				<el-col :span="5">
					<el-form-item label="诊疗结果">
						<el-text class="mx-1" :text="form.patient_sn" clearable></el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="5">
					<el-form-item label="拟诊：" prop="pseudodiagnosis">
						<el-text class="mx-1" :text="form.pseudodiagnosis" clearable>{{
								form.pseudodiagnosis
							}}
						</el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="5">
					<el-form-item label="诊疗建议：" prop="patient_suggest">
						<el-text class="mx-1" :text="form.patient_suggest" clearable>{{
								form.patient_suggest
							}}
						</el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider/>
			<el-row>
				<el-col :span="5">
					<el-form-item label="治疗建议">
						<el-text class="mx-1" :text="form.patient_sn" clearable></el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<template v-if="is_medicine_list">
				<template v-for="(item, index) in form.medicine_list" :key="index">
					<el-row>
						<el-col :span="20">
							<el-form-item :label="item.medicine_name">
								<el-text class="mx-1" :text="item.medicine_sku" clearable> {{
										item.medicine_sku
									}}
								</el-text>
								<el-text class="mx-1" :text="item.medicine_num" clearable>&nbsp;&nbsp; x
									{{ item.medicine_num }}
								</el-text>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="20">
							<el-form-item label="用法用量：">
								<el-text class="mx-1" :text="item.use_desc" clearable>{{ item.use_desc }}</el-text>
							</el-form-item>
						</el-col>
					</el-row>
					<el-divider v-if="(index+1) < form.medicine_list.length"/>
				</template>
			</template>

		</el-main>
	</el-card>


	<el-card shadow="hover">
		<el-row>
			<el-col :span="5">
				<h2>问诊视频存储</h2>
			</el-col>
			<el-col :span="5">
			</el-col>
		</el-row>
		<el-divider/>
		<el-main>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="call_begin" label="通话开始时间"/>
				<el-table-column prop="call_end" label="通话结束时间"/>
				<el-table-column label="操作" fixed="right" align="right" width="160">
					<template #default="scope">
						<el-button-group>
							<el-button v-if="scope.row.video_url" text type="primary" size="small"
									   @click="handleData('show',scope.row, scope.$index)"
									   v-auth="'patient:order:info'">查看视频
							</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
		</el-main>
	</el-card>

	<el-card shadow="hover">
		<el-row>
			<el-col :span="5">
				<h2>问诊文件存储</h2>
			</el-col>
			<el-col :span="5">
			</el-col>
		</el-row>
		<el-divider/>
		<el-main>
			<el-row>
				<template v-if="patient_pic_list.length > 0">
				<el-col :span="2" :offset="1" v-for="(item, index) in patient_pic_list" :key="index">
					<div class="demo-image__preview">
						<el-image
							style="width: 100px; height: 100px"
							:src="item"
							:zoom-rate="1.2"
							:max-scale="7"
							:min-scale="0.2"
							:preview-src-list="patient_pic_list"
							:initial-index="index"
							fit="cover"
						/>
					</div>
				</el-col>
				</template>
			</el-row>
		</el-main>
	</el-card>
	<!--			</el-form>-->
	<!--		</el-card>-->
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
</template>

<script>
import saveDialog from './video.vue'

export default {
	name: 'carIndexDetail',
	components: {
		saveDialog,
	},
	data() {
		return {
			action: null,
			isLoading: false,
			//表单数据
			form: {},
			//弹窗
			dialog: {
				save: false
			},
			//是否有用药建议
			is_medicine_list: false,
			//视频数据
			tableData: [{'call_begin': '', 'call_end': '', 'video_url': ''}],
			//问诊图片
			patient_pic_list:[],
		}
	},
	created() {

	},
	mounted() {
		this.patient_sn = this.$route.query.patient_sn;

		//修改tab名称
		this.action = this.$route.query.action;
		var title = '';
		if (this.action == 'view') {
			title = '问诊单详情';
		}
		this.$store.commit("updateViewTagsTitle", title)

		if (this.patient_sn) {
			this.loadForm()
		}
	},
	methods: {
		//表单数据加载
		loadForm() {
			this.isLoading = true;
			let params = {
				patient_sn: this.patient_sn,
			}
			this.$API['patient.patient_order'].detail.post(params).then((res) => {
				if (res.code == 0) {
					this.setData(res.data);
				}
			}).catch((msg) => {
				this.$alert(msg, "提示", {type: 'error'})
			})
			this.isLoading = false;
		},
		//查看视频
		handleData(mode, row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open(mode).setData(row)
			})
		},
		//表单注入数据
		setData(data) {
			//处理数据
			if (data.car_cat_id == 0) {
				this.form.car_cat_id = ''
			}
			if (data.energy_type == 0) {
				this.form.energy_type = ''
			}
			if (data.status == 0) {
				this.form.status = ''
			}
			if (data.pr_id == 0) {
				this.form.pr_id = ''
			}
			if (data.car_size_id == 0) {
				this.form.car_size_id = ''
			}
			if (data.refrigerating_type == 0) {
				this.form.refrigerating_type = ''
			}
			if (data.driving_license_start == '0000-00-00') {
				this.form.driving_license_start = ''
			}
			if (data.driving_license_end == '0000-00-00') {
				this.form.driving_license_end = ''
			}
			if (data.road_operation_license_end == '0000-00-00') {
				this.form.road_operation_license_end = ''
			}
			if (data.road_transport_certificate_end == '0000-00-00') {
				this.form.road_transport_certificate_end = ''
			}
			if (!data.medicine_list) {
				data.medicine_list = [];
			}
			if (data.medicine_list && data.medicine_list.length > 0) {
				this.is_medicine_list = true;
			}
			this.form = data
			if (data.channel_provider == 'ZHIYING') {
				this.tableData = [{
					'call_begin': data.call_begin,
					'call_end': data.call_end,
					'video_url': data.video_url
				}];
			} else {
				this.tableData = [];
			}
			if(data.patient_pic_list && data.patient_pic_list.length > 0){
				let pic_data_list = [];
				data.patient_pic_list.forEach(item => {
					pic_data_list.push(item.patient_pic_url);
				})
				this.patient_pic_list = pic_data_list;
			}
			console.log('dddddddddddddd',this.patient_pic_list);
		}
	}
}
</script>

<style>
.avatar {
	width: 148px;
	height: 148px;
	display: block;
}

.el-form-item--default .el-form-item__label {
	text-align: left;
}

.el-form-item--default .el-form-item__label {
	justify-content: start;
}

.el-card {
	margin: 10px;
}


.demo-image__error .image-slot {
	font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
	font-size: 30px;
}
.demo-image__error .el-image {
	width: 100%;
	height: 200px;
}
</style>
